<template>
  <div class="card"
   :style="{backgroundImage:`url(${comBackground} )`}"
  >
      <slot></slot>
  </div>
</template>

<script>
export default {
  name:"CommonCard",
  props:{
    isSelect:{
      type:Boolean,
      default:false
    },
    isFx:{
       type:Boolean,
      default:false
    }
  },
  computed:{
    comBackground(){

      if(this.isFx){
        return  require('@/assets/images/fx/fx.png')
      }

      if(this.isSelect){
          return  require('@/assets/images/bg6.png')
      }

     return require('@/assets/images/bg4.png')
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
    // opacity: 0.6;
  width: 100%;
  height: 100%;
  position: relative;
  //  background-position: center center;
  // background-image: url(../assets/images/bg4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  
  // background-attachment:fixed;
  
}
</style>